import React from 'react'
import { connect } from 'react-redux'
import classnames from 'classnames'

const Step1 = (props) => {
  const {queryInvite, join, inviteId, inviteIdChange, tip = ''} = props
  const inviteCn = classnames({'buy-row': true, hide: !(tip === '')})
  const tipCn = classnames({'buy-row': true, hide: tip === ''})
  return <div>
    <div className="buy-row first">
    </div>
    <div className="buy-row first clearfix">
      <input type="text" className="invite-id" value={inviteId} onChange={inviteIdChange} id="rule-ipt" placeholder="请输入玩法ID"></input>
      <div className="invite-btn">
        <img className="full-width" src="img/mall/dialog/query.png" alt="" onClick={queryInvite}></img>
      </div>
    </div>
    <div className={tipCn}>
      <span>{tip}</span>
    </div>
    <div className="bottom-btn">
      {/* <img className="full-width" src="img/mall/dialog/wx-pay.png" alt=""></img> */}
      <img onClick={join} className="full-width" src="img/group/confirm-green.png" alt=""></img>      
    </div>
  </div>
}

const Step2 = (props) => {
  const {tip, confirm} = props
  return <div>
  <div className="buy-row first">
    {tip}
  </div>
  <div className="bottom-btn">
    <img className="confirm" onClick={confirm} src="img/mall/dialog/confirm.png" alt=""></img>
  </div>
</div> 
}

class JoinRule extends React.Component<any, any> {
  public constructor(props) {
    super(props)
    this.state = {
      step: 1,
      inviteId: '',
      tip: '',
      querySuccess: false
    }
  }
  
  public componentDidMount() {
  }

  public focusIpt() {
    // if (document.getElementById('rule-ipt')) {
    //   document.getElementById('rule-ipt').focus()
    // }
  }

  public queryInvite() {
    if (this.state.inviteId.length === 0) {
      this.setState({tip: '请输入玩法ID'})
    } else {
      this.setState({tip: ''})
      const url = `${config.pre}/crowd/conf/${Cookies.get('areaCode')}/${this.state.inviteId}/detail`
      const opt = { method: 'GET' }
      fetchJson(url, opt).then(data => {
        console.log(data);
        if (data.result) {
          this.setState({tip: data.message, querySuccess: false})
          return 
        }
        this.setState({tip: '玩法名称: ' + data.data.confVo.confName, querySuccess: true})
      })
    }
  }

  public join() {
    if (!this.state.querySuccess) {
      this.setState({tip: '请先查询玩法'})
      return 
    }
    const send = {
      confId: this.state.inviteId
    }
    const url = `${config.pre}/crowd/apply/${Cookies.get('areaCode')}`
    const opt = { method: 'POST', body: JSON.stringify(send) }
    fetchJson(url, opt).then(data => {
      if (data.result) {
        this.setState({tip: '申请失败, ' + data.message, step: 2})
        return
      }
      this.setState({tip: '申请成功, ' + data.message, step: 2})
    })
  }

  
  public handleRuleIdChange(e) {
    this.setState({inviteId: e.target.value})
  }

  confirm() {
    console.log('confirm!!')
  }

  public render() {
    const {close, item} = this.props
    const {step, inviteId, tip, orderTip} = this.state
    return <div className="dialog-block has-mask full" onClick={this.focusIpt}>
      <div className="mall-content content">
        <div className="full-width title-wrapper">
          <img onClick={close} className="close" src="img/mall/dialog/close.png" alt=""/>
        </div>
        <div className="modal-wrapper">
          {step === 1 ? <Step1 item={item} inviteId={inviteId} tip={tip}
            queryInvite={this.queryInvite.bind(this)}
            join={this.join.bind(this)}
            inviteIdChange={this.handleRuleIdChange.bind(this)}></Step1> : null}
          {step === 2 ? <Step2 inviteId={inviteId}
           tip={tip}
           back={() => this.setState({step: 1, orderTip: ''})}
           confirm={close}></Step2> : null}
        </div>
      </div>
    </div>
  }

}
export default connect()(JoinRule)